<template>
  <div class="sresult">
    <div class="sr-flex x16">
      <el-card class="sr-card">
        <div slot="header">
          <h3>
            <span v-for="(item, idx) in infoList" :key="idx"
              ><img class="topicImg" :src="item.imgUrl" alt="" />{{
                item.label
              }}</span
            >
          </h3>
        </div>
        <SContent
          :contentInfo="resultInfo.result"
          @clickDetail="clickDetail"
        ></SContent>
        <!-- <ul class="list">
          <li v-for="(item, index) in resultInfo.result" :key="index">
            <p class="date">{{ item.time }}</p>
            <p
              class="text"
              v-html="item.opinion"
              @click="clickDetail(item.news_id)"
            ></p>
            <ul class="content">
              <li
                v-for="(citem, index2) in item.opinion"
                :key="index2"
                v-html="citem"
                @click="clickDetail(item.news_id)"
              ></li>
            </ul>
          </li>
        </ul> -->
      </el-card>
    </div>
    <div class="sr-flex x8">
      <el-card class="sr-card">
        <div class="tag-box">
          <h4>相关人物</h4>
          <p class="tag-list">
            <span
              v-for="(item, index) in resultInfo.people"
              :key="index"
              class="blue"
              @click="getWords(item.key)"
              >{{ item.key }}</span
            >
          </p>
        </div>
        <div class="tag-box">
          <h4>相关话题</h4>
          <p class="tag-list">
            <span
              v-for="(item, index) in resultInfo.topic"
              :key="index"
              class="green"
              @click="getWords(item.key)"
              >{{ item.key }}</span
            >
          </p>
        </div>
        <div class="tag-box">
          <h4>相关地点</h4>
          <p class="tag-list">
            <span
              v-for="(item, index) in resultInfo.place"
              :key="index"
              class="red"
              @click="getWords(item.key)"
              >{{ item.key }}</span
            >
          </p>
        </div>
        <div class="tag-box">
          <h4>相关组织</h4>
          <p class="tag-list">
            <span
              v-for="(item, index) in resultInfo.organization"
              :key="index"
              class="orange"
              @click="getWords(item.key)"
              >{{ item.key }}</span
            >
          </p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
// import { mapState } from "vuex";

export default {
  props: {
    searchInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    resultInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      imgInfo: {
        topic: require("./topic.svg"),
        people: require("./people.svg"),
        place: require("./place.svg"),
        organization: require("./organization.svg"),
      },
      infoList: [],
    };
  },
  watch: {
    resultInfo: {
      handler(newVal) {
        this.infoList = [];
        for (let val in newVal.opinionType) {
          if (newVal.opinionType[val].length) {
            this.infoList.push({
              imgUrl: this.imgInfo[val],
              label: newVal.opinionType[val][0],
            });
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    // ...mapState(["industryPointOfViewSearchTxt"]),
  },
  methods: {
    // 触发搜索
    getWords(item) {
      this.$emit("setWords", item);
    },
    clickDetail(item) {
      this.$emit("gotoDetail", item);
    },
    // 跳转到详情页
    // gotoDetail(item) {
    //   this.$router.push({
    //     name: "ConsultDetail",
    //     query: {
    //       id: item.id,
    //     },
    //   });
    // },
  },
  mounted() {},
  components: {
    SContent: () => import("./content.vue"),
  },
};
</script>

<style lang="scss" scoped>
.sresult {
  position: relative;
  padding: 10px;
  display: flex;
  .sr-flex {
    margin-right: 10px;
    &:last-of-type {
      margin-right: 0;
    }
    &.x8 {
      width: calc((100% - 10px) / 3);
    }
    &.x16 {
      width: calc((100% - 10px) / 1.5);
    }
  }

  .topicImg {
    width: 0.28rem;
    margin-right: 0.1rem;
  }

  .sr-card {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 0.7rem - 2rem);
    padding: 0 0.16rem;
    // height: 100%;
    // min-height: 300px;
    box-sizing: border-box;
    ::v-deep {
      .el-card__header {
        h3 {
          font-size: 0.28rem;
          font-weight: 400;
          color: #023fec;
          span {
            margin-right: 0.1rem;
          }
        }
      }
      .el-card__body {
        padding-left: 0;
        padding-right: 0;
      }
    }
    // .list {
    //   width: 100%;
    //   padding-left: 0.3rem;
    //   padding-right: 0.3rem;
    //   box-sizing: border-box;
    //   margin-bottom: 0.1rem;
    // //   > li {
    //     // position: relative;
    //     // display: flex;
    //     // .date {
    //     //   width: 0.9rem;
    //     //   align-self: flex-start;
    //     //   line-height: 0.3rem;
    //     //   font-size: 0.14rem;
    //     //   text-align: center;
    //     //   color: #333;
    //     //   background-color: rgba(199, 227, 246, 1);
    //     // }
    //     // .text {
    //     //   position: relative;
    //     //   width: 100%;
    //     //   line-height: 0.2rem;
    //     //   text-indent: 0.1rem;
    //     //   font-size: 0.14rem;
    //     //   color: #333;
    //     //   word-wrap: break-word;
    //     //   word-break: break-all;
    //     //   cursor: pointer;
    //     //   margin-bottom: 0.1rem;
    //     //   &:before {
    //     //     position: absolute;
    //     //     top: calc(0.1rem - 2px);
    //     //     left: 0;
    //     //     width: 4px;
    //     //     height: 4px;
    //     //     border-radius: 50%;
    //     //     background-color: #333;
    //     //     content: "";
    //     //   }
    //     // }
    //     // .content {
    //     //   position: relative;
    //     //   width: calc(100% - 1rem);
    //     //   padding-left: 0.2rem;
    //     //   padding-bottom: 0.1rem;
    //     //   margin-left: 0.2rem;
    //     //   border-left: 1px solid rgba(199, 227, 246, 1);
    //     //   box-sizing: border-box;
    //     //   &:after {
    //     //     position: absolute;
    //     //     bottom: 0;
    //     //     left: 0.2rem;
    //     //     width: calc(100% - 0.2rem);
    //     //     height: 0;
    //     //     border-bottom: 1px dashed rgba(187, 187, 187, 1);
    //     //     content: "";
    //     //   }
    //     //   > li {
    //     //     position: relative;
    //     //     width: 100%;
    //     //     line-height: 0.3rem;
    //     //     text-indent: 0.1rem;
    //     //     font-size: 0.16rem;
    //     //     color: #333;
    //     //     word-wrap: break-word;
    //     //     word-break: break-all;
    //     //     cursor: pointer;
    //     //     margin-bottom: 0.05rem;
    //     //     &:before {
    //     //       position: absolute;
    //     //       top: calc(0.15rem - 2px);
    //     //       left: 0;
    //     //       width: 4px;
    //     //       height: 4px;
    //     //       border-radius: 50%;
    //     //       background-color: #333;
    //     //       content: "";
    //     //     }
    //     //   }
    //     // }
    // //   }
    // }
    .tag-box {
      position: relative;
      padding: 0 0.3rem;
      margin-bottom: 0.2rem;
      h4 {
        line-height: 0.23rem;
        margin-bottom: 0.15rem;
        font-size: 0.16rem;
        font-weight: 400;
        color: #828181;
      }
      .tag-list {
        position: relative;
        span {
          display: inline-block;
          padding: 0.08rem 0.14rem;
          margin-right: 0.12rem;
          margin-bottom: 0.1rem;
          border-width: 1px;
          border-style: solid;
          border-radius: 4px;
          font-size: 0.13rem;
          cursor: pointer;
          &:hover {
            opacity: 0.8;
          }
          &.blue {
            border-color: #3894ff;
            color: #3894ff;
            background-color: #e9f3ff;
          }
          &.green {
            border-color: #7ac756;
            color: #7ac756;
            background-color: #eef8e8;
          }
          &.red {
            border-color: #f26161;
            color: #f26161;
            background-color: #feeeee;
          }
          &.orange {
            border-color: #e29836;
            color: #e29836;
            background-color: #fdf5e9;
          }
        }
      }
    }
  }
}
</style>